﻿@{
    ViewBag.Title = "商品资料";
}
@section Head{
    <link href="~/Content/fileinput/fileinput.min.css" rel="stylesheet" />
    <script src="~/Content/fileinput/fileinput.min.js"></script>
    <script src="~/Content/fileinput/zh.js"></script>
}

<form id="formEdit">
    <div class="modal-dialog" role="document">
        <input type="hidden" name="guid" id="guid" value="@ViewBag.GUID" />
        <div class="modal-content">
            <div class="modal-body">

                <div class="form-group">
                    <label for="txt_name">商品名称</label>
                    <input type="text" name="txt_name" class="form-control" id="txt_name" placeholder="商品名称">
                </div>
                <div class="form-group">
                    <label for="txt_num" style="float: left; margin-bottom: 0px;">商品规格</label><br />
                         <input type="text" name="txt_num" class="form-control" id="txt_num" placeholder="商品规格" style="width: 50%; float: left; margin-left: 0px;">
                  
                    @Html.DropDownList("sel_specifications", ViewBag.Select as IEnumerable<SelectListItem>, new { @class = " form-control", style = "width:30%; margin-left: 5px;padding-left:5px;" })
                </div>

                <div class="form-group">
                    <label for="txt_price">商品价格</label>
                    <input type="text" name="txt_price" class="form-control" id="txt_price" placeholder="商品价格">
                </div>
                <div class="form-group">
                    <label for="txt_price">上传图片</label>
                    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" accept="image/*"/>
                </div>
            </div>
            <div class="navbar navbar-inverse navbar-fixed-bottom" style="text-align:right;padding-top:2%;">
                <div class="navbar-inner">
                <button type="button" id="reset" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>重置</button>
                <button type="submit" id="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>
</form>
<link href="~/Content/bootstrap/css/bootstrapValidator.css" rel="stylesheet" />
<script src="~/Content/bootstrap/js/bootstrapValidator.js"></script>
<script type="text/javascript">
    //定义全局变量
    var name;//商品名称
    var guid;//商品的唯一ID
    $(function () {
        //0.初始化fileinput
        var oFileInput = new FileInput();
        oFileInput.Init("txt_file", "/home/uploadimg");
        $('#formEdit').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                txt_name: {
                    validators: {
                        notEmpty: {
                            message: '商品名称不能为空'
                        }
                    }
                },
                txt_num: {
                    validators: {
                        notEmpty: {
                            message: '规格不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '只能输入数字'
                        }
                    }
                },
                txt_price: {
                    validators: {
                        notEmpty: {
                            message: '价格不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9.]+$/,
                            message: '只能输入数字和小数点'
                        }
                    }
                }

            },
            submitHandler: function (validator, form, submitButton) {
                var data = {
                    ID: $("#guid").val(),
                    Name: $("#txt_name").val(),
                    Price: $("#txt_price").val(),
                    SpecificationsID: $("#sel_specifications").val(),
                    Qty: $("#txt_num").val(),
                };
                $.post("/home/saveproduct", data, function (data) {
                    if (data.success) {
                        name = data.name;
                        guid = data.id;
                        $('#txt_file').fileinput('upload');
                    }
                    else {
                        alert("保存失败:" + data.msg);
                    }
                });

            }
        });

        $("#reset").click(function () {
            window.location.reload();
        })


    });
    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控件（第一次初始化）
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                uploadAsync: false, //默认异步上传
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式     
                dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 3, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                uploadExtraData: function (previewId, index) {
                    var data = {
                        Name: name,
                        Id: guid
                    };
                    return data;
                }

            });
            //导入文件上传完成之后的事件
            $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
                if (!data.response.success) {
                    alert("图片上传失败");
                    return;
                } else { alert("图片上传成功"); }
            });
        }
        return oFile;
    };
</script>
